// 表格
const list = document.querySelector('.list')
// 更新界面
const updateShow = document.querySelector('.insertShow')
// 关闭更新界面
const cancel = document.querySelector('.cancel')
// 提交数据
const update = document.querySelector('.add')
// 获取添加弹窗的输入框DOM对象
const inputs = document.querySelectorAll('.insertShow input')
// 获取添加弹窗select的DOM对象
const updateShowSelect = document.querySelector('.insertShow select[name="identification"]')

// 控件栏DOM对象
const first = document.querySelector('.first')
const last = document.querySelector('.last')
const next = document.querySelector('.next')
const theLast = document.querySelector('.theLast')
const paged = document.querySelector('.paged')
// 页码总数DOM对象
const pageSum = document.querySelector('.controlTable select')
const allPage = document.querySelector('.allPage')
// 搜索栏
const search = document.querySelector('.search')

// 记录更新的帐号
let oldCountNumber

// 页码
let page = 1
let pageNumber = 5
// 记录更新前的院系号
let oldProfessMajorId
// 记录当前页数据行数量
let trNumber
// 记录最大页数
let maxPage = 0

// 获取所有帐号信息
async function getAllCount() {
  const result = (await axios({
    url: 'http://127.0.0.1:8080/Root/Count/getAllCount',
    params: {
      page,
      pageNumber
    }
  })).data.data
  const htmlStr = result.map((e, key) => {
    return `
      <tr data-id="${key}">
      <td>${e.countNumber}</td>
      <td>${e.password}</td>
      <td>${e.identification}</td>
      <td>${e.id}</td>
      <td>
        <button class="update" data-id="${key}">修改</button>
        <button class="delete" data-id="${key}">删除</button>
      </td>
    </tr>
    `
  }).join('')
  list.innerHTML = htmlStr
}

search.addEventListener('change', () => {
  const information = search.value
  if (information === '') {
    getAllCount()
  }
  getSearchCount(information)
})

// 搜索获取账号信息
async function getSearchCount(information) {
  const result = (await axios({
    url: 'http://127.0.0.1:8080/Root/Count/getSearchCount',
    params: {
      page,
      pageNumber,
      information
    }
  })).data.data
  const htmlStr = result.map((e, key) => {
    return `
      <tr data-id="${key}">
      <td>${e.countNumber}</td>
      <td>${e.password}</td>
      <td>${e.identification}</td>
      <td>${e.id}</td>
      <td>
        <button class="update" data-id="${key}">修改</button>
        <button class="delete" data-id="${key}">删除</button>
      </td>
    </tr>
    `
  }).join('')
  list.innerHTML = htmlStr
}

getAllCount()     //初始化页面

cancel.addEventListener('click', () => {
  updateShow.style.display = 'none'
})

// 修改数据
list.addEventListener('click', async (e) => {
  const element = e.target
  if (!element.classList.contains('update')) {
    return
  }
  updateShow.style.display = 'block'
  const updateId = oldCountNumber = document.querySelector(`.list tr[data-id="${element.dataset.id}"] td:nth-child(1)`).innerHTML
  const result = (await axios({
    url: 'http://127.0.0.1:8080/Root/Count/getUpdateCountInformation',
    params: {
      id: updateId
    }
  })).data.data
  console.log(result);
  inputs[0].value = result.countNumber
  inputs[1].value = result.password
  for (let i = 0; i < updateShowSelect.options.length; i++) {
    const option = updateShowSelect.options[i]
    if (option.text == result.identification) {
      updateShowSelect.selectedIndex = i
      break
    }
  }
})

// 确认更新
update.addEventListener('click', () => {
  const countNumber = inputs[0].value
  const password = inputs[1].value
  const identification = updateShowSelect.value
  axios({
    url: 'http://127.0.0.1:8080/Root/Count/updateCount?oldNumber=' + oldCountNumber,
    method: 'POST',
    data: {
      countNumber,
      password,
      identification
    }
  }).then(() => {
    alert('修改成功')
    updateShow.style.display = 'none'
    getAllCount()
  }).catch(() => {
    alert('该帐号已存在')
  })
})

// 获取最大页数
function getMaxPage() {
  axios({
    url: 'http://127.0.0.1:8080/Root/Count/getPage',
    params: {
      pageNumber
    }
  }).then(result => {
    allPage.innerHTML = maxPage = result.data.data
  })
}

getMaxPage()

// 表格控件监听
first.addEventListener('click', () => {
  page = 1
  getAllCount(page, pageNumber)
})

last.addEventListener('click', () => {
  if (page > 1) {
    showAllProfessionMajor(--page, pageNumber)
  }
})

next.addEventListener('click', () => {
  getMaxPage()
  if (page < maxPage) {
    getAllCount(++page, pageNumber)
  }
})

theLast.addEventListener('click', () => {
  page = maxPage
  getAllCount(page, pageNumber)
})

pageSum.addEventListener('change', () => {
  pageNumber = pageSum.value
  page = 1
  getAllCount(page, pageNumber)
  getMaxPage()
})

paged.addEventListener('change', () => {
  page = paged.value
  // 限定page范围
  page = page > maxPage ? maxPage : page
  page = page < 1 ? 1 : page
  getAllCount(page, pageNumber)
})